<template>
  <view class="card">
    <view class="card_title">
      <view></view>
      <text>{{ title }}</text>
      <text style="flex: 1;text-align: right">
        <slot></slot>
      </text>
    </view>
    <view class="card_body">
      <u-time-line>
        <u-time-line-item v-for="(item,index) in list" :key="index" nodeTop="2">
          <template v-if="index === 0" v-slot:node>
            <view class="u-node" style="background: #E96444;"></view>
          </template>
          <template v-slot:content>
            <view>
              <view class="u-order-title">{{ item.step }}%</view>
              <view class="u-order-desc">{{ item[$t('item.title')] }}</view>
              <view class="u-order-img">
              
				
				<u-image v-if="item.images"
				          :src="item.images"
				          :lazy-load="true"
				          :width="imgWidth"
				          :height="imgHeight"
				          style="margin: 20rpx"
				 >
				 </u-image>
              </view>
              <view class="u-order-time">{{ timeFormat(item.finishedtime) }}</view>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view>
  </view>
</template>

<script>

import {IMAGE_URL,IMAGE_PIC} from "@/config/app";
export default {
  props: {
    title: {
      type: String,
      default: "",
      required: false
    },
    list: {
      type: Array,
      default: [],
      required: true
    }
  },
  data() {
    return {
	  IMAGE_PIC,IMAGE_URL,
      imgUrl: '',
      imgWidth: '100rpx',
      imgHeight: '100rpx',
    }
  },
  mounted() {
  },
  computed: {
    timeFormat() {
      return (val) => {
        return this.$u.timeFormat(val, 'yyyy-mm-dd hh:MM')
      }
    }
  }
}
</script>

<style lang="scss">
.card {
  background-color: $my-bgColorFFFFFF;
  padding: 33.14rpx;
  margin-bottom: 33.14rpx;

  .card_title {
    font-size: 24rpx;
    font-weight: 500;
    color: #0B0B0B;
    line-height: 35rpx;
    display: flex;
    flex-direction: row;
    padding-bottom: 3.49rpx;
    border-bottom: 2rpx solid #E7E7E7;

    view {
      width: 2rpx;
      margin-right: 10.47rpx;
      height: 37rpx;
      border: 5rpx solid;
      border-image: linear-gradient(180deg, rgba(221, 42, 16, 1), rgba(247, 152, 41, 1)) 5 5;
    }
  }
}

.card_body {
  margin-top: 33.14rpx;
  padding: 30rpx;
}

.card_item {
  font-size: 21rpx;
  font-weight: 400;
  line-height: 30rpx;
  margin-bottom: 17.14rpx;
  display: flex;
  align-items: center;

  image {
    margin-left: 10.47rpx;
  }
}

.card_image {
  display: flex;
  margin-top: 17.74rpx;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 129.07rpx;

  image {
    height: 129.07rpx;
    width: 125.58rpx;
    margin-right: 10rpx;
  }
}

.u-node {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 30rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}

.u-order-img {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
